<route lang="jsonc" type="page">
  {
    "layout": "default",
    "style": {
      "navigationBarTitleText": "选择科室",
      "navigationBarBackgroundColor": "white",
    }
  }
</route>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getDepartmentList } from '@/api/selectdepartment'
import type {
  IDepartmentItem,
  IDepartmentChildItem
} from '@/api/types/selectdepartment'

// 科室数据
const departments = ref<IDepartmentItem[]>([])
// 当前选中的一级科室索引
const activeFirst = ref(0)
// 当前一级科室下的子科室
const currentChildren = ref<IDepartmentChildItem[]>([])
// 错误信息
const error = ref('')

// 加载科室数据
const loadDepartmentData = async () => {
  error.value = ''
  try {
    const res = await getDepartmentList()
    if (res.code ===10000) {
      departments.value = res.data
      // 设置初始子科室
      if (res.data.length > 0) {
        currentChildren.value = res.data[0].child || []
      }
    } else {
      error.value = res.message || '获取科室数据失败'
    }
  } catch (err) {
    error.value = '网络错误，请重试'
    console.error('Failed to get department list:', err)
  }
}

// 选择一级科室
const selectFirstLevel = (index: number) => {
  activeFirst.value = index
  currentChildren.value = departments.value[index].child || []
}

// 选择科室
const selectDepartment = (item: IDepartmentChildItem) => {
  // 这里可以添加科室选择后的逻辑，例如跳转或返回
  console.log('Selected department:', item)
  uni.navigateTo({ 
    url: '/pages/imagetext/imagetext' 
    })
}

// 页面加载时获取数据
onMounted(() => {
  loadDepartmentData()
})
</script>

<template>
  <view class="department-container">
    <!-- 科室内容 -->
    <view  class="content-wrap">
      <!-- 一级科室 -->
      <scroll-view class="first-level" scroll-y>
        <view
          v-for="(item, index) in departments"
          :key="index"
          :class="['first-item', { 'active': activeFirst === index }]"
          @tap="selectFirstLevel(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <!-- 二级科室 -->
      <view class="second-level">
        <view
          v-for="item in currentChildren"
          :key="item.id"
          class="second-item"
          @tap="selectDepartment(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.department-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.content-wrap {
  display: flex;
  width: 100%;
  height: 100%;
}

.first-level {
  width: 33%;
  height: 100%;
  background-color: #f7f8fa;
}

.first-item {
  padding: 15px 10px;
  width: 240rpx;
  text-align: left;
  font-size: 14px;
  color: gray;
//   border-bottom: 1px solid #eee;
}

.first-item.active {
  background-color: #fff;
  color: black;
  font-weight: bold;
  position: relative;

  
}

.second-level {
  width: 67%;
  height: 100%;
  background-color: #ffffff;
  padding: 10px;
}

.second-item {
  padding: 10px 20px;
  color: #aaa;
  font-size: 14px;
//   border-bottom: 1px solid #eee;
}

.error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #e64340;
}

.retry-btn {
  margin-top: 20px;
  background-color: #1989fa;
  color: #fff;
}
</style>